<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>文章分类</title>
    <link href="/css/bootstrap.min.css" rel="stylesheet">
    <link href="/css/cl-css.css" rel="stylesheet">
    <link href="/font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/highlight/styles/railscasts.css">
    <link rel="stylesheet" href="/css/common.css">
</head>
<body>
<!--navbar-->
<div th:replace="component/componet-navbar::componet-navbar (${3})"></div>
<!--内容-->
<div class="cl-cantainer container" style="margin-top: 20px">
    <div class="row">
        <!--        左侧标签栏-->
        <div class="col-2">
            <div class="list-group">
                <!-- 标签集-->
                <a href="#" class="list-group-item list-group-item-action" th:each="category : ${categories} " th:text="${category.name}"
                  th:class=" ${nowTag.equals(category.name)} ? 'list-group-item list-group-item-action active' : 'list-group-item list-group-item-action' "
                  th:href="@{/classify(tag = ${category.name})}">
                    Test
                </a>
            </div>
        </div>
        <!--        右侧内容-->
        <div class="col-10">
            <div class="row">
                <div class="col" style="border-left: 2px solid deepskyblue;background: white">
                    <span style="line-height:50px">分类</span>
                    <span style="float: right;line-height: 50px">
                        <span>共</span>
                        <span style="color: orange;font-weight: bolder;font-size:x-large" th:text="${articleSize}">14</span>
                        <span>篇文章</span>
                    </span>
                </div>
            </div>

            <section class="col" style="height: 700px;overflow-y: auto;">
                <!--                  卡片  -->
                <section th:each="item : ${classifyList}">
                    <!--                     发布时间-->
                    <div class="row" style="margin-top: 20px;margin-bottom: 7px;font-size: 0.9rem;color: grey"
                        th:text="${#dates.format(item.publishTime,'yyyy-MM-dd HH:mm:ss')}" >
                        2021.06.05 12:11:11
                    </div>
                    <!--                     卡片body-->
                    <div class="row">
                        <div class="col"
                             style="border-left: 2px solid deepskyblue;background: white;border-radius: 3px;box-shadow: 2px 2px 5px  #888888 ">
                            <div>
                             <a th:href="@{/article/{id} (id=${item.articleId})}"> <span style="line-height:60px" th:text="${item.articleTitle}">标题1</span></a>
                                <br>
                                <!-- 标签集-->
                                <section style="font-size: large;margin-bottom: 20px">
                                    <span class="badge badge-primary" style="margin-left: 5px" th:each="tag : ${item.articleTagList} " th:text="${tag}" >标签3</span>
                                </section>
                            </div>
                        </div>
                    </div>
                </section>
            </section>
        </div>
    </div>
</div>
<!--页脚-->
<div th:replace="component/component-footer::component-footer"></div>

<script src="/jquery/jquery.min.js"></script>
<script src="/js/bootstrap.bundle.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/highlight/highlight.pack.js"></script>
<script>
    hljs.initHighlightingOnLoad();
</script>
<script src="/js/common.js"></script>
</body>
</html>
